<template>
  <view class="best-modal digital-keyboard-modal" :class="{ 'best-modal-active': _show }">
    <view class="best-modal-layer" @tap="cancel"></view>
    <view class="best-modal-content">
      <view class="dk-title">输入密码</view>
      <view class="dk-subtitle">请输入支付密码</view>
      <view class="pwd-box clearfix" @tap="getKeyboard">
        <view
          class="pwd-text"
          v-for="(item, index) in _digits"
          :key="index"
          :class="{ active: activeInput == index }"
          >{{ payPassWord[index] }}</view
        >
      </view>
      <view class="pwd-forget">
        <text v-if="_forget" @tap="forgetPwd">没有密码？</text> <text v-if="_forget" @tap="forgetPwd">忘记密码</text>
      </view>
      <view class="digital-keyboard">
        <view class="form_edit clearfix">
          <view
            class="num"
            v-for="item in digitalList"
            :key="item"
            :class="{ 'no-num': item === '' || item === '-1' }"
            @tap="getKeyNumber(item)"
            >{{ item }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WanlPayPassword',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: '',
    },
    digits: {
      type: [Number, String],
      default: 6,
    },
    forget: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      activeInput: 0,
      digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'],
      paymentPwd: '',
    };
  },
  computed: {
    payPassWord() {
      var payPassWord = this.paymentPwd.split('') || [];
      payPassWord.fill('•');
      return payPassWord;
    },
    _show() {
      this.initData();
      return String(this.show) === 'false' ? false : true;
    },
    _forget() {
      return String(this.forget) === 'false' ? false : true;
    },
    _digits() {
      let digits = [];
      digits.length = this.digits;
      return digits;
    },
  },
  methods: {
    initData: function () {
      this.paymentPwd = this.value;
      this.activeInput = this.value.length;
    },
    forgetPwd: function () {
      console.log('跳转到忘记密码');
    },
    cancel: function () {
      this.$emit('cancel');
    },
    getKeyNumber: function (val) {
      if (val === '' || (val != -1 && this.activeInput == this.digits)) {
        //空或者已经达到最大值
        return false;
      } else if (val != -1) {
        //数字输入
        this.activeInput++;
        this.paymentPwd += val;
        if (this.activeInput == this.digits) {
          //验证密码正确性
          return this.$emit('submit', this.paymentPwd);
        }
      } else {
        //删除
        if (this.activeInput != 0) {
          this.activeInput--;
          this.paymentPwd = this.paymentPwd.substr(0, this.activeInput);
        }
      }
    },
    getKeyboard: function (e) {
      var index = e.target.dataset.index;
      if (index === undefined) return false;
      var _length = this.paymentPwd.length;
      this.activeInput = index <= _length ? index : _length;
    },
  },
};
</script>

<style>
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

.clearfix {
  zoom: 1;
}

.best-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  z-index: 99;
}

.best-modal.best-modal-active {
  display: block;
}

.best-modal-layer {
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1025;
}

.best-modal-content {
  position: relative;
  z-index: 9999;
}

.digital-keyboard-modal view {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.digital-keyboard-modal .best-modal-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 20px 20px 0px 0px;
  background: #fff
    url()
    center top / 100% auto no-repeat;
}

.digital-keyboard-modal .dk-title {
  font-size: 36rpx;
  font-weight: 800;
  color: #fff;
  line-height: 90rpx;
  text-align: center;
}

.digital-keyboard-modal .dk-subtitle {
  font-size: 24rpx;
  color: rgba(152, 152, 148, 1);
  line-height: 73rpx;
  text-align: center;
}

.digital-keyboard-modal .pwd-forget {
  font-size: 24rpx;
  color: #26c6b3;
  padding: 20rpx 0 30rpx;
  text-align: center;
  line-height: 33rpx;
}
.digital-keyboard-modal .pwd-forget text {
  margin: 0 10rpx;
}
/* 键盘 */
.digital-keyboard-modal .form_edit {
  position: relative;
}

.digital-keyboard-modal .num {
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  float: left;
  background-color: #fff;
  width: 33.33333333%;
  cursor: pointer;
  border: 1rpx solid #eee;
  height: 118rpx;
  text-align: center;
  color: #333;
  line-height: 118rpx;
  font-size: 52rpx;
  /* font-weight: bold; */
}

.digital-keyboard-modal .num:nth-of-type(3n) {
  border-bottom: 0;
  border-right: 0;
}

.digital-keyboard-modal .num:nth-of-type(3n + 1) {
  border-bottom: 0;
  border-left: 0;
}

.digital-keyboard-modal .num:nth-of-type(3n + 2) {
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

.digital-keyboard-modal .num.no-num {
  font-size: 0;
}

.digital-keyboard-modal .num:last-child {
  background: #f2f2f2
    url()
    center center / auto 50rpx no-repeat;
}

.digital-keyboard-modal .pwd-box {
  padding-left: 10rpx;
  position: relative;
  text-align: center;
}

.digital-keyboard-modal .pwd-text {
  position: relative;
  line-height: 92rpx;
  vertical-align: middle;
  text-align: center;
  font-size: 50rpx;
  font-weight: bold;
  width: 92rpx;
  height: 92rpx;
  margin-right: 10rpx;
  display: inline-block;
  border: solid 1px #ccc;
}

.digital-keyboard-modal .pwd-text.active:after {
  -webkit-animation: twinkle 1s infinite;
  animation: twinkle 1s infinite;
  height: 70%;
  width: 4rpx;
  content: '';
  position: absolute;
  top: 15%;
  left: 50%;
  margin-left: -2rpx;
  background-color: #4fa5e1;
}

@-webkit-keyframes twinkle {
  from {
    background-color: #4fa5e1;
  }

  to {
    background-color: transparent;
  }
}

@keyframes twinkle {
  from {
    background-color: #4fa5e1;
  }

  to {
    background-color: transparent;
  }
}
</style>
